import React, { useEffect }  from "react"
import {ArrowLeftOutlined} from "@ant-design/icons";
import {Form, Input, Button, PageHeader, message, Checkbox } from "antd";
import { postJSON, putJSON, get } from "../../../shared/server"
import ToolTipsInput from "../../../shared/libs/tooltips-input";
import {regex_mobile, regex_userName, regex_name} from "project-config"
import { validateHook } from "../common/index";
import CheckOutlined from "@ant-design/icons/lib/icons/CheckOutlined";

const SalesmanForm = (props) => {
	const { history, match: { params } } = props;
	const isEdit = params.id && params.id >= 0;
	const [form] = Form.useForm();
	const idParams = params.id ? {id: params.id} : {}
	const { loginNameValidate,  phoneValidate, phoneNoStatus, loginNameStatus, setLoginNameStatus, setPhoneNoStatus } = validateHook(idParams);

	const layout = {
		labelCol: { span: 6 },
		wrapperCol: { span: 16 },
	};
	const tailLayout = {
		wrapperCol: { offset: 6, span: 16 },
	};

	useEffect(() => {
		if(isEdit) {
			get(`/management/account/salesman/${params.id}`).then(data => {
				form.setFieldsValue({
					loginName: data.loginName,
					name: data.name,
					phoneNo: data.phoneNo,
					remarks: data.remarks
				})
			})
		}
  }, []);

	const onFinish = values => {
		if(isEdit ) {
			putJSON(`/management/account/salesman/${params.id}`, {
				name: values.name,
				phoneNo: values.phoneNo,
				remarks: values.remarks
			}).then(result => {
				if(result) {
					message.success("更新成功")
					history.push("/app/account/salesman")
				}
			})
		} else {
			postJSON('/management/account/salesman', values).then(result => {
				if(result) {
					message.success("添加成功")
					if(values.continue) {
						form.resetFields();
						setLoginNameStatus({});
						setPhoneNoStatus({});
					} else {
						history.push("/app/account/salesman");
					}
				}
			})
		}
	};

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
	};
	

	return (
		<div className="zr-panel">
			<div className="zr-panel-header">
				<PageHeader backIcon={<ArrowLeftOutlined/>}
					onBack={() => window.history.back()} title={`${isEdit ? "编辑" : "新增"}业务员`}
					subTitle=""/>
			</div>
			<div className="zr-list-page-box body-bg body-border absolute">
				<div className="zr-table-box">
				<Form
					{...layout}
					style={{paddingTop: 20, width: 500, margin: "0 auto"}}
					form={form}
					name="basic"
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
				>
					<Form.Item
						label="登录名"
						name="loginName"
						hasFeedback
						{...loginNameStatus}
						validateFirst={true}
						rules={[
							{ required: true, message: "登录名必须填写" },
							{ pattern: regex_userName, message: "使用2-20位字母|数字|#_@.-"},
							{ validator: loginNameValidate }
						]}
					>
						<ToolTipsInput
							title="可输入2-20位[数字/字母/@_.#-]"
							id="_loginName"
							placeholder="请输入登录名"
							disabled={isEdit}
						/>
					</Form.Item>
					<Form.Item
						label="姓名"
						name="name"
						validateFirst={true}
						rules={[{ required: true, message: "姓名必须填写" },{
							pattern: regex_name, message: "姓名只能是中文或者英文或数字"
						}]}
					>
						<ToolTipsInput title="请输入中文/英文" id="_name" placeholder="请输入姓名"/>
					</Form.Item>
					<Form.Item
						label="手机号码"
						name="phoneNo"
						hasFeedback
						{...phoneNoStatus}
						validateFirst={true}
						rules={[
							{ required: true, message: "手机号码必须填写" },
							{pattern: regex_mobile, message: "请输入正确的国内手机号" },
							{validator: (_, value, callback) => phoneValidate(_, value, callback, isEdit ? params.id: null)}
						]}
					>
						<ToolTipsInput
							title="有效的国内手机号码"
							id="_phoneNo"
							placeholder="请输入有效的手机号码"
						/>
					</Form.Item>
					<Form.Item
						label="备注"
						name="remarks"
						rules={[{ required: false, message: "备注" }]}
					>
						<Input.TextArea />
					</Form.Item>
					{
						isEdit
						? null
						: <Form.Item
								{...tailLayout}
								name="continue"
								valuePropName="checked"
								rules={[{required: false, message: '是否继续添加'}]}
							>
								<Checkbox>连续添加</Checkbox>
							</Form.Item>
					}
					<Form.Item {...tailLayout}>
						<Button type="primary" htmlType="submit">
							<CheckOutlined /> 保存
						</Button>
						<Button style={{ marginLeft: 10 }} onClick={() => window.history.back()}>
							返回
						</Button>
					</Form.Item>
				</Form>
				</div>
			</div>
		</div>
	)
}

export default SalesmanForm;